# Component: Button

Interactive action element with icon support

Core Component

![[Pasted image 20260426081458.png]]

### Class Architecture

| Type      | Class Name            | Description                                                                |
| --------- | --------------------- | -------------------------------------------------------------------------- |
| Bootstrap | `.btn`                | Injected by Blazorise. Handles base interaction styles.                    |
| Bootstrap | `.btn-{color}`        | Handles theme colors (Primary, Link, etc.). Supports white-text overrides. |
| Bootstrap | `.btn-xs` / `.btn-xl` | Custom extended sizes defined in the SCSS implementation.                  |
| ==Block== | `.as-button`          | Main hook. Sets `white-space: nowrap` and manages icon spacing.            |
| Element   | `__label`             | The text content wrapper.                                                  |
| Element   | `__icon`              | The icon container (font-awesome).                                         |
| Modifier  | `__icon--start`       | Applied to icons positioned before the label.                              |
| Modifier  | `__icon--end`         | Applied to icons positioned after the label.                               |

### Internal Spacing Logic

The SCSS uses smart selectors to ensure margins only appear when needed:

##### Generated HTML (With Icons)

```html
<button class="btn btn-primary as-button">
    <i class="as-button__icon as-button__icon--start fa-solid fa-download"></i>
    <span class="as-button__label">Download</span>
    <i class="as-button__icon as-button__icon--end fa-solid fa-chevron-right"></i>
</button>
```

##### SCSS

```scss
.as-button {
  // Label after Start-Icon
  &__icon--start + &__label {
    margin-left: 0.25rem;
  }

  // Label before End-Icon
  &__label:has(+ &__icon--end) {
    margin-right: 0.25rem;
  }
}
```

